<template>
    <div>
        {{$route.query.fiction_id}}
        <b-header>
            <img src="../assets/imgs/icon-back.png" alt="" @click="goUp">
            <span>详情</span>
            <router-link to="/">
                <img src="../assets/imgs/icon-home.png" alt="">
            </router-link>
        </b-header>
        <div>
            <dl>
                <dt>
                    <!-- <img :src="detailObj.cover" alt=""> -->
                </dt>
                <dd>
                    <h2>{{detailObj.title}}</h2>
                    <span>作者：{{detailObj.authors}}</span>
                    <p>{{detailObj.content}}</p>
                    <button @click="$router.push('/read/352876/1')">阅读</button>
                </dd>
            </dl>
        </div>
    </div>
</template>
<script>
import bHeader from '../components/b-header'
export default {
    components:{
        bHeader
    },
    data(){
        return {
            detailObj:{}
        }
    },
    methods:{
        goUp(){
            this.$router.go(-1);
        },
        getDatail(fiction_id){
            this.$http.get(`/api/detail?fiction_id=${fiction_id}`).then(res => {
                console.log(res);
                if(res.data.code === 1){
                    this.detailObj = res.data.data.item;
                }

            })
        }
    },
    // watch:{
    //     '$route.query.fiction_id'(newVal,oldVal){
    //         let fiction_id = this.$route.query.fiction_id;
    //         this.$http.get(`/api/detail?fiction_id=${fiction_id}`).then(res => {
    //             console.log(res);
    //         })
    //     }
    // },
    beforeRouteUpdate(to,from,next){
        console.log("to",to);
        console.log("from",from);
        let fiction_id = to.query.fiction_id;
        this.getDatail(fiction_id)
    },
    beforeRouteLeave (to, from, next) {
        let confirm = window.confirm('确认要离开吗？');
        if(confirm){
            next()
        }
    },
    created(){
        let fiction_id = this.$route.query.fiction_id;
        this.getDatail(fiction_id)
    }
}
</script>

// 动态路由  全局路由对象 $router  当前的路由对象 $route
